<template>
  <div class="body">
    <div class="top_introduction">
      电子信息产业指研制和生产电子设备的产业，包括微电子、光电子、软件、计算机、通信、网络、消费电子以及信息服务业等众多领域。电子信息产业链主要分为三个环节，上游为电子专用材料，中游为电子元器件及被动元件，下游为军工电子、消费电子等行业应用。
    </div>
    <div class="top">
      <div class="top_left">
        <div class="top_left_top">
          <div class="label_box label1">
            <div>
              <img src="~img/yonggong.png" alt="" />
            </div>
            <div class="label_box_right">
              <div class="label_box_title">用工指数</div>
              <div class="label_box_text">0.94</div>
            </div>
          </div>
          <div class="label_box label2">
            <div>
              <img src="~img/jyzs.png" alt="" />
            </div>
            <div class="label_box_right">
              <div class="label_box_title">经营指数</div>
              <div class="label_box_text">0.94</div>
            </div>
          </div>
        </div>
        <div class="top_left_top" style="margin-top: 20px">
          <div class="label_box label3">
            <div>
              <img src="~img/fxzs.png" alt="" />
            </div>
            <div class="label_box_right">
              <div class="label_box_title">风险指数</div>
              <div class="label_box_text">0.94</div>
            </div>
          </div>
          <div class="label_box label4">
            <div>
              <img src="~img/jqzs.png" alt="" />
            </div>
            <div class="label_box_right">
              <div class="label_box_title">景气指数</div>
              <div class="label_box_text">0.94</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top_right">
        <cyqjEcharts1></cyqjEcharts1>
      </div>
      <div class="top_right2">
        <div class="module_title">
          {{ cyqjTitle }}
          <div class="module_title_checkBox">
            <div
              class="module_title_check"
              @click="ygrszbCheck('1')"
              :class="ygrszb == 1 ? 'module_title_true' : 'module_title_false'"
            ></div>
            <div
              class="module_title_check"
              @click="ygrszbCheck('2')"
              :class="ygrszb == 2 ? 'module_title_true' : 'module_title_false'"
            ></div>
            <div
              class="module_title_check"
              @click="ygrszbCheck('3')"
              :class="ygrszb == 3 ? 'module_title_true' : 'module_title_false'"
            ></div>
          </div>
        </div>
        <div class="cyqjEcharts4_box">
          <cyqjEcharts4 ref="cyqjEcharts4"></cyqjEcharts4>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_left">
        <div class="module_title">产业环节</div>
        <div class="cyhj_big_box">
          <div class="cyhj_box">
            <div class="cyhj_box_title">上游</div>
            <div class="cyhjAuto">
              <div
                v-for="(item, index) in cyhjList.sy"
                :key="index"
                class="cyhj_auto"
              >
                <div class="cyhj_yj" @click="cyhjTitleClick(item)">
                  {{ item.name }}
                </div>
                <div class="cyhj_nav" v-show="item.show">
                  <div
                    class="cyhj_nav_title"
                    v-for="(itm, indx) in item.type"
                    :key="indx"
                  >
                    <div
                      class="cyhj_nav_contant"
                      @click="cyhjChildrenIsShow(itm)"
                    >
                      <div style="width: 14px">
                        <div v-if="itm.type && itm.type.length > 0">
                          <img
                            src="~img/right_sj.png"
                            v-if="!itm.childrenIsShow"
                            alt=""
                          />
                          <img src="~img/bottom_sj.png" v-else alt="" />
                        </div>
                      </div>

                      <div>
                        {{ itm }}
                      </div>
                    </div>
                    <div v-if="itm.childrenIsShow">
                      <div v-for="(it, id) in itm.type" :key="id">
                        <div class="cyhj_children">
                          {{ it.text }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cyhj_box cyhj_label2">
            <div class="cyhj_box_title">中游</div>
            <div class="cyhjAuto">
              <div
                v-for="(item, index) in cyhjList.zy"
                :key="index"
                class="cyhj_auto"
              >
                <div class="cyhj_yj" @click="cyhjTitleClick(item)">
                  {{ item.name }}
                </div>
                <div class="cyhj_nav" v-show="item.show">
                  <div
                    class="cyhj_nav_title"
                    v-for="(itm, indx) in item.type"
                    :key="indx"
                  >
                    <div
                      class="cyhj_nav_contant"
                      @click="cyhjChildrenIsShow(itm)"
                    >
                      <div style="width: 14px">
                        <div v-if="itm.type && itm.type.length > 0">
                          <img
                            src="~img/right_sj.png"
                            v-if="!itm.childrenIsShow"
                            alt=""
                          />
                          <img src="~img/bottom_sj.png" v-else alt="" />
                        </div>
                      </div>

                      <div>
                        {{ itm }}
                      </div>
                    </div>
                    <div v-if="itm.childrenIsShow">
                      <div v-for="(it, id) in itm.type" :key="id">
                        <div class="cyhj_children">
                          {{ it.text }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cyhj_box cyhj_label3">
            <div class="cyhj_box_title">下游</div>
            <div class="cyhjAuto">
              <div
                v-for="(item, index) in cyhjList.xy"
                :key="index"
                class="cyhj_auto"
              >
                <div class="cyhj_yj" @click="cyhjTitleClick(item)">
                  {{ item.name }}
                </div>
                <div class="cyhj_nav" v-show="item.show">
                  <div
                    class="cyhj_nav_title"
                    v-for="(itm, indx) in item.type"
                    :key="indx"
                  >
                    <div
                      class="cyhj_nav_contant"
                      @click="cyhjChildrenIsShow(itm)"
                    >
                      <div style="width: 14px">
                        <div v-if="itm.type && itm.type.length > 0">
                          <img
                            src="~img/right_sj.png"
                            v-if="!itm.childrenIsShow"
                            alt=""
                          />
                          <img src="~img/bottom_sj.png" v-else alt="" />
                        </div>
                      </div>

                      <div>
                        {{ itm }}
                      </div>
                    </div>
                    <div v-if="itm.childrenIsShow">
                      <div v-for="(it, id) in itm.type" :key="id">
                        <div class="cyhj_children">
                          {{ it.text }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_middle">
        <div class="module_title">产业经营状况</div>
        <div class="jyzk_echarts1">
          <cyqjEcharts2
            :dataList="cyjyzkList"
            v-if="cyjyzkList.cpcc.length > 0"
          ></cyqjEcharts2>
        </div>
        <div class="jyzk_echarts2">
          <cyqjEcharts3></cyqjEcharts3>
        </div>
      </div>
      <div class="bottom_right">
        <div class="module_title">产业全景新</div>
        <div class="cyjzd_head">
          <div
            @click="cyqjCheck(1)"
            :class="cyqj == 1 ? 'cyjzd_head_true' : 'cyjzd_head_false'"
          >
            主营业务收入
          </div>
          <div
            @click="cyqjCheck(2)"
            :class="cyqj == 2 ? 'cyjzd_head_true' : 'cyjzd_head_false'"
          >
            纳税额
          </div>
          <div
            @click="cyqjCheck(3)"
            :class="cyqj == 3 ? 'cyjzd_head_true' : 'cyjzd_head_false'"
          >
            总资产额
          </div>
        </div>
        <div class="cyjzy_table">
          <div class="cyjzy_table_headBox">
            <div class="cyjzy_table_head_left"></div>
            <div class="cyjzy_table_head">市占率（CR5）</div>
            <div class="cyjzy_table_head">市占率（CR10）</div>
          </div>
          <div class="cyjzy_table_contantBox">
            <div class="cyjzy_table_contant_left">上游</div>
            <div class="cyjzy_table_contant">
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">数值</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">占比</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
            </div>
            <div class="cyjzy_table_contant">
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">数值</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">占比</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
            </div>
          </div>
          <div class="cyjzy_table_contantBox">
            <div class="cyjzy_table_contant_left">中游</div>
            <div class="cyjzy_table_contant">
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">数值</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">占比</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
            </div>
            <div class="cyjzy_table_contant">
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">数值</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">占比</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
            </div>
          </div>
          <div class="cyjzy_table_contantBox">
            <div class="cyjzy_table_contant_left">下路</div>
            <div class="cyjzy_table_contant">
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">数值</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">占比</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
            </div>
            <div class="cyjzy_table_contant">
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">数值</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
              <div class="cyjzy_table_contant_div">
                <div class="cyjzy_table_contant_title">占比</div>
                <div class="cyjzy_table_contant_num">0.94</div>
              </div>
            </div>
          </div>
        </div>

        <!-- <el-carousel :height="365" :autoplay="true">
          <el-carousel-item style="width: 100%">
            <div class="cyqjEcharts4_box">
              <cyqjEcharts4 :cyqjList="cyqjList[0]"></cyqjEcharts4>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="cyqjEcharts4_box">
              <cyqjEcharts4 :cyqjList="cyqjList[1]"></cyqjEcharts4>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="cyqjEcharts4_box">
              <cyqjEcharts4 :cyqjList="cyqjList[2]"></cyqjEcharts4>
            </div>
          </el-carousel-item>
        </el-carousel> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getEmpNumByIndustryType, cyjy, cyhj } from "@/api/screen/cyqj";
import cyqjEcharts1 from "./cyqjEcharts1.vue";
import cyqjEcharts2 from "./cyqjEcharts2.vue";
import cyqjEcharts3 from "./cyqjEcharts3.vue";
import cyqjEcharts4 from "./cyqjEcharts4.vue";
export default {
  components: {
    cyqjEcharts1,
    cyqjEcharts2,
    cyqjEcharts3,
    cyqjEcharts4,
  },

  data() {
    return {
      cyqjTitle: "用工人数占比",
      cyqj: 1,
      ygrszb: 1,
      cyqjList: {},
      cyjyzkList: {
        cpcc: [],
        lrze: [],
        rjnse: [],
        zyywsr: [],
      },
      // cyqjList: [
      //   {
      //     title: "",
      //     getname: ["上游", "中游", "下游"],
      //     getvalue: [300, 200, 100],
      //   },
      //   {
      //     title: "",
      //     getname: ["上1游", "中游", "下游"],
      //     getvalue: [350, 250, 150],
      //   },
      //   {
      //     title: "",
      //     getname: ["上游", "中游", "下游"],
      //     getvalue: [310, 210, 110],
      //   },
      // ],
      cyhjList: {
        sy:[],
        zy:[],
        xy:[]
        // sy: [
        //   {
        //     title: "电子产业材料",
        //     show: false,
        //     list: [
        //       {
        //         text: "电磁屏蔽材料",
        //         childrenIsShow: false,
        //         children: [
        //           {
        //             text: "子产业",
        //           },
        //           {
        //             text: "子产业",
        //           },
        //         ],
        //       },
        //       {
        //         text: "光电材料",
        //       },
        //       {
        //         text: "磁性材料",
        //       },
        //       {
        //         text: "半导体材料",
        //         childrenIsShow: false,
        //         children: [
        //           {
        //             text: "子产业",
        //           },
        //           {
        //             text: "子产业",
        //           },
        //         ],
        //       },
        //       {
        //         text: "电解质材料",
        //       },
        //     ],
        //   },
        // ],
        // zy: [
        //   {
        //     title: "主动原件",
        //     show: false,
        //     list: [
        //       {
        //         text: "电子真空器件",
        //       },
        //       {
        //         text: "半导体分立器件",
        //       },
        //       {
        //         text: "显示器件",
        //       },
        //       {
        //         text: "半导体集成电路",
        //         childrenIsShow: false,
        //         children: [
        //           {
        //             text: "子产业",
        //           },
        //           {
        //             text: "子产业",
        //           },
        //         ],
        //       },
        //       {
        //         text: "光电子器件",
        //       },
        //       {
        //         text: "半导体照明器件",
        //       },
        //     ],
        //   },
        //   {
        //     title: "被动元件",
        //     show: false,
        //     list: [
        //       {
        //         text: "电感器",
        //         childrenIsShow: false,
        //         children: [
        //           {
        //             text: "子产业",
        //           },
        //           {
        //             text: "子产业",
        //           },
        //         ],
        //       },
        //       {
        //         text: "谐振器",
        //       },
        //       {
        //         text: "电阻器",
        //       },
        //       {
        //         text: "滤波器",
        //       },
        //     ],
        //   },
        // ],
        // xy: [
        //   {
        //     title: "重点应用",
        //     show: false,
        //     list: [
        //       {
        //         text: "重工电子",
        //       },
        //       {
        //         text: "LED照明",
        //       },
        //       {
        //         text: "消费电子",
        //       },
        //       {
        //         text: "汽车电子",
        //       },
        //       {
        //         text: "通信设备",
        //       },
        //       {
        //         text: "新型显示",
        //       },
        //       {
        //         text: "医疗电子",
        //       },
        //     ],
        //   },
        // ],
      },
    };
  },
  created() {
    this.ygrszbCheck("1");
    this.getcyjy();
    this.getcyhj();
  },
  methods: {
    getcyhj() {
      cyhj({
        industryType: "电子信息产业",
      }).then((response) => {
        console.log(response, "产业环节");
        response.forEach((element) => {
          if (element.location == "上游") {
            for(let i in element.data){
              element.data[i].show=false
            }
            this.cyhjList.sy = element.data;
          console.log(this.cyhjList.sy,'this.cyhjList.sythis.cyhjList.sy')
          }
          if (element.location == "中游") {
            for(let i in element.data){
              element.data[i].show=false
            }
            this.cyhjList.zy = element.data;
          }
          if (element.location == "下游") {
            for(let i in element.data){
              element.data[i].show=false
            }
            this.cyhjList.xy = element.data;
          }
        });
        console.log(this.cyhjList,'产业环节列表')

      });
    },
    cyhjChildrenIsShow(item) {
      item.childrenIsShow = !item.childrenIsShow;
    },
    cyqjCheck(val) {
      this.cyqj = val;
    },
    cyhjTitleClick(item) {
      item.show = !item.show;
    },
    getcyjy() {
      cyjy({
        industryType: "电子信息产业",
      }).then((response) => {
        let obj = {
          cpcc: [],
          lrze: [],
          rjnse: [],
          zyywsr: [],
        };
        response.forEach((element) => {
          obj.cpcc.push(element.cpcc);
          obj.zyywsr.push((element.zyywsr * 0.00000001).toFixed(2));
          obj.lrze.push((element.lrze * 0.00000001).toFixed(2));
          obj.rjnse.push((element.rjnse * 0.00000001).toFixed(2));
        });
        this.cyjyzkList = obj;
      });
    },
    ygrszbCheck(val) {
      if (val == "1") {
        this.cyqjTitle = "用工人数占比";
      } else if (val == "2") {
        this.cyqjTitle = "企业数量占比";
      } else if (val == "3") {
        this.cyqjTitle = "主营收入占比";
      }
      this.ygrszb = val;
      getEmpNumByIndustryType({
        lx: "电子信息产业",
        type: val,
      }).then((response) => {
        this.cyqjList = {
          title: "",
          getname: ["上游", "中游", "下游"],
          getvalue: [
            response.data.upstreamNum,
            response.data.midstreamNum,
            response.data.downstreamNum,
          ],
        };

        this.$refs.cyqjEcharts4.check(this.cyqjList);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  color: #cff4fe;
  width: 100%;
  height: 100%;
  //   display: flex;
  //   flex-direction: column;
  // height: 100vh;
  // overflow: auto;
}
.top_introduction {
  line-height: 30px;
}
.top {
  width: 100%;
  height: 220px;
  height: 32%;
  // background-color: red;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.top_left {
  width: 33%;
  height: 100%;
  //   background-color: pink;
  //   margin-top: 20px;
}
.top_right {
  // flex: 1;
  width: 33%;
  height: 100%;
  // background-color: aqua;
  margin-left: 50px;
}
.top_right2 {
  width: 33%;
  height: 100%;
  // background-color: aqua;
  margin-left: 50px;
}
.bottom {
  margin-top: 12px;
  //   flex: 1;
  height: 400px;
  // background-color: #00c0fa;
  height: 65%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0%;
  // margin-bottom: 200px;
}
.bottom_left {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: cornflowerblue;
}
.bottom_middle {
  width: 28%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: cornflowerblue;
}
.bottom_right {
  width: 33%;
  // height: 450px;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: cornflowerblue;
}
.top_left_top {
  display: flex;
  justify-content: space-between;
  //   margin-top: 20px;
}
.label_box {
  width: 48%;
  height: 95px;
  //   background: linear-gradient(-33deg, #5293f7 0%, #19369b 100%);
  background-image: url("~img/cyqj_label_back.png");
  display: flex;
  padding: 20px;
  //   justify-content: center;
  //   align-items: center;
  img {
    width: 63px;
  }
}
.label1 {
  border-left: 4px solid #0084ff;
}
.label2 {
  border-left: 4px solid #ffad55;
}
.label3 {
  border-left: 4px solid #eb5d58;
}
.label4 {
  border-left: 4px solid #ce5fff;
}
.label_box_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
}
.label_box_title {
  color: #68c8fa;
}
.label_box_text {
  font-size: 30px;
  font-family: YouSheBiaoTiHei;
}
.module_title {
  width: 100%;
  height: 50px;
  background-image: url("~img/zyqj_title.png");
  background-size: 100% 100%;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  padding-left: 70px;
  position: relative;
}
.jyzk_echarts1 {
  width: 100%;
  height: 150px;
  height: 36%;
  // background-color: red;
  margin-top: -10px;
}
.jyzk_echarts2 {
  width: 100%;
  // height: 250px;
  flex: 1;
  // background-color: red;
  // margin-top: -10px;
}
.cyhj_big_box {
  display: flex;
  flex: 1;
  height: 400px;
  background: linear-gradient(0deg, #001b58, rgba(20, 62, 140, 0));
}
.cyhj_box {
  width: 225px;

  // height: 48px;
  // text-align: center;
  // line-height: 48px;
  // background-image: url('~img/cyhj_back.png');
  // background-size: 100% 100%;
}
.cyhj_box_title {
  width: 100%;
  height: 48px;
  text-align: center;
  line-height: 48px;
  background-image: url("~img/cyhj_back.png");
  background-size: 100% 100%;
}
.cyhj_label2 {
  margin-left: -25px;
  // background-color: red;
}
.cyhj_label3 {
  margin-left: -25px;
}
.cyhj_yj {
  width: 167px;
  height: 46px;
  background-image: url("~img/cyyj_back.png");
  background-size: 100% 100%;
  margin: auto;
  text-align: center;
  line-height: 46px;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
.cyhj_nav {
  width: 159px;
  overflow: hidden;
  padding: 30px 20px 20px 35px;
  margin: auto;
  font-size: 14px;
  background-size: 100% 100%;
  background-image: url("~img/cyhj_contant.png");
  margin-top: -28px;
}
.cyhj_nav_title {
  margin-top: 15px;
  color: #7cdffb;
  cursor: pointer;
}
.cyhjAuto {
  // background-color: #68c8fa;
  height: 345px;
  width: 100%;
  overflow: auto;
}
.cyhjAuto::-webkit-scrollbar {
  display: none;
}
.cyqjEcharts4_box {
  width: 100%;
  height: 100%;
  // background-color: red;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
}
::v-deep .el-carousel__container {
  height: 365px;
}
.cyjzd_head {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  height: 9%;
}
.cyjzd_head_true {
  width: 33%;
  // height: 30px;
  height: 100%;
  line-height: 30px;
  background-image: url("~img/cyhx_smallTitle.png");
  background-size: 100% 100%;
  padding-left: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cyjzd_head_false {
  color: #166dda;
  width: 33%;
  // height: 30px;
  height: 100%;
  line-height: 30px;
  background-image: url("~img/cyhx_smallTitle2.png");
  background-size: 100% 100%;
  padding-left: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cyjzy_table_headBox {
  display: flex;
  margin-bottom: 15px;
}
.cyjzy_table_head_left {
  width: 5%;
  // background-color: pink;
}
.cyjzy_table_head {
  width: 40%;
  // background-color: red;
  text-align: center;
}
.cyjzy_table {
  margin-top: 20px;
  // height: 69%;
  flex: 1;
}
.cyjzy_table_contant_left {
  width: 5%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-items: center;
  background-color: #0084ff;
  background: linear-gradient(120deg, #015eea, #00c0fa);
}
.cyjzy_table_contant {
  width: 40%;
  // height: 82px;
  height: 100%;
  // background-color: #eb5d58;
  background-image: url("~img/cyfx_div_img.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.cyjzy_table_contant_div {
  width: 45%;
  text-align: center;
}
.cyjzy_table_contantBox {
  display: flex;
  margin-top: 10px;
  height: 28%;
}
.cyjzy_table_contant_title {
  color: #97edff;
  font-size: 12px;
}
.cyjzy_table_contant_num {
  margin-top: 5px;
}
.cyhj_children {
  margin-left: 10px;
  margin-top: 5px;
}
.cyhj_nav_contant {
  display: flex;
  overflow: hidden;
  margin-left: -10px;
  img {
    width: 12px;
    margin-top: 2px;
  }
}
.cyhj_auto {
  overflow: auto;
  // background-color: red;
}
.module_title_check {
  width: 10px;
  height: 10px;
  background-size: 100% 100%;
  margin-left: 10px;
  cursor: pointer;
}
.module_title_true {
  background-image: url("~img/cyjy_true.png");
}
.module_title_false {
  background-image: url("~img/cyjy_false.png");
}
.module_title_checkBox {
  display: flex;
  position: absolute;
  right: 10%;
  top: 10%;
  // background-color: red;
}
</style>
>
